$(function () {
    // 我们的翻页组件需要两个参数
    // 1. 当前页码是多少
    // 2. 一共有多少页
    // 在这里可以开始加载页面数据

    // 翻页组件本身并不管数据的获取, 还是需要 api
    // 获取文章的 api 需要翻页一个要两个参数
    // 1. page 当前页码
    // 2. perpage 每页长度

    let page = 1
    let perpage = 10
    // 有了这些数据以后就要,根据分页设定来获取数据

    // 文章列表获取逻辑
    // $.ajax({
    //     url: bignews.article_query,
    //     data: {
    //         page,
    //         perpage
    //     },
    //     success(res) {
    //         console.log(res);
    //         let htmlStr = template('articleTemp', res.data)

    //         // 获取完文章列表以后,
    //         // 应该将当前的数据中供多少页的数字作为参数
    //         // 用来渲染分页组件
    //         setPage(res.data.totalPage)
    //         // console.log(res.data.data);

    //         $('tbody').html(htmlStr)
    //     }
    // })
    postInit()

    function postInit() {
        $.ajax({
            url: bignews.article_query,
            data: {
                page,

                perpage,
                // 添加当前选中的分类和状态作为筛选条件
                type: $('#selCategory').val(),
                state: $('#selStatus').val()
            },
            success(res) {
                console.log(res);
                let htmlStr = template('articleTemp', res.data)

                // 获取完文章列表以后,
                // 应该将当前的数据中供多少页的数字作为参数
                // 用来渲染分页组件
                setPage(res.data.totalPage)
                console.log(res.data.totalPage);

                $('tbody').html(htmlStr)
            }
        })
    }

    // 尝试使用分页组件
    // $('.pagination').bootstrapPaginator({
    //     // 这里面是分页属性
    //     bootstrapMajorVersion: 3,
    //     currentPage: 1,
    //     totalPages: 10,
    //     onPageClicked() {
    //         console.log('被点击了');
    //     }
    // })

    function setPage(totalPages, currentPage) {
        // 尝试使用分页组件
        $('.pagination').bootstrapPaginator({
            // 这里面是分页属性
            bootstrapMajorVersion: 3,
            currentPage,
            totalPages,
            onPageClicked(event, originEvent, type, newPage) {
                // 这是翻页组件被点击时触发的回调
                // 里面可以接受四个参数, 其中最重要是第四个
                console.log('被点击了' + newPage);
                page = newPage
                postInit()
            }
        })
    }

    function cateInit() {
        $.ajax({
            url: bignews.category_list,
            success(res) {
                console.log(res);
                let htmlStr = template('cateTemp', res)
                $('#selCategory').html(htmlStr)
            }
        })
    }

    $('#btnSearch').on('click', function () {
        console.log($('#selStatus').val());
        console.log($('#selCategory').val());
        // 点击筛选,可以调用文章获取函数
        postInit()
    })


    // 事件委托绑定删除按钮
    $('tbody').on('click', '#btn-del', function () {
        console.log('删除按钮被点击了');
        // 在这里获取当前按钮的 id 自定义属性, 发送请求删除文章
        console.log($(this).data('id'));

        $.ajax({
            type: 'post',
            url: bignews.article_delete,
            data: {
                id: $(this).data('id')
            },
            success(res) {
                console.log(res);
                const regExp = /^2\d\d$/
                // 判断删除成功之后调用文章加载函数
                if (regExp.test(res.code)) {
                    postInit()
                }
            }
        })
    })

})